import React from "react";
import ReactECharts from "echarts-for-react";
import type { EChartsOption } from "echarts";

import {
  CockpitChartBaseProps,
  echartsCockpitTheme,
  legendCommonConfig,
  lineChartGridCommonConfig,
  lineChartSeriesCommonConfig,
  lineChartTooltipCommonConfig,
  lineChartXAxisCommonConfig,
  lineChartYAxisCommonConfig,
  purGradientColor,
  supGradientColor,
} from "../helps/echartsCommon";
import { zhMonthGenerator } from "../helps";
import { createRoot } from "react-dom/client";
import CustomChartTooltip, { ToolTipFonts } from "../customChartTooltip";
const tooltipRootDom = document.createElement("div");

const tooltipRoot = createRoot(tooltipRootDom);

export const getRegionalTradeVolumeLineChartOption = ({
  shipmentAmount = [],
  purchaseAmount = [],
  unitName,
}: RegionalTradeVolumeLineChartProps): EChartsOption => {
  return {
    color: ["#68A8FF", "#8CDCB8"],

    tooltip: {
      ...lineChartTooltipCommonConfig,
      formatter: (params: any) => {
        const [sup, pur] = params;
        tooltipRoot.render(
          <CustomChartTooltip>
            <ToolTipFonts>{sup?.name}</ToolTipFonts>
            <ToolTipFonts>
              <span
                dangerouslySetInnerHTML={{
                  __html: sup?.marker || "",
                }}
              />
              销售额：{sup?.value}
              {unitName}
            </ToolTipFonts>
            <ToolTipFonts>
              <span
                dangerouslySetInnerHTML={{
                  __html: pur?.marker || "",
                }}
              />
              采购额：{pur?.value}
              {unitName}
            </ToolTipFonts>
          </CustomChartTooltip>
        );
        return tooltipRootDom;
      },
    },
    legend: {
      ...legendCommonConfig,

      data: ["销售", "采购"],
    },

    grid: {
      ...lineChartGridCommonConfig,
    },
    xAxis: [
      {
        ...lineChartXAxisCommonConfig,

        data: zhMonthGenerator(purchaseAmount || shipmentAmount),
      },
    ],
    yAxis: [
      {
        ...lineChartYAxisCommonConfig,
        name: "单位：" + unitName,
      },
    ],
    series: [
      {
        ...lineChartSeriesCommonConfig,
        name: "销售",

        areaStyle: {
          color: supGradientColor,
        },

        data: shipmentAmount,
      },
      {
        name: "采购",
        ...lineChartSeriesCommonConfig,
        areaStyle: {
          color: purGradientColor,
        },

        data: purchaseAmount,
      },
    ],
  };
};

export interface RegionalTradeVolumeLineChartProps
  extends CockpitChartBaseProps {
  // 销售额
  shipmentAmount?: number[];
  // 采购额
  purchaseAmount?: number[];
  unitName?: string;
}
const RegionalTradeVolumeLineChart = ({
  reactEChartsProps,
  shipmentAmount = [],
  purchaseAmount = [],
  unitName = "万元",
}: RegionalTradeVolumeLineChartProps) => {
  return (
    <ReactECharts
      theme={echartsCockpitTheme}
      {...reactEChartsProps}
      option={getRegionalTradeVolumeLineChartOption({
        shipmentAmount,
        purchaseAmount,
        unitName,
      })}
    />
  );
};

export default RegionalTradeVolumeLineChart;
